<template>
  <div>
    <van-nav-bar  fixed=true  placeholder=true title="我出租的" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-notice-bar scrollable :text="this.goods.title" />
    <van-cell v-bind:value=goods.description />
    <div>
      <ul v-for="(url, index) in goods.urls" :key="index">
        <van-image width="20rem" height="20rem" :src="url" />
      </ul>
    </div>
    <van-panel title="租金/天" :status="this.goods.price"></van-panel>
    <van-panel title="押金/元" :status="this.goods.guarentee"></van-panel>
    <van-panel title="总金额/元" :status="this.goods.totalPrice"></van-panel>
    <van-panel title="总天数/天" :status="this.goods.days"></van-panel>
    <van-panel title="买家地址" :status="this.goods.fahuoaddress"></van-panel>
    <van-panel title="卖家地址" :status="this.goods.jihuiaddress"></van-panel>
    <van-button v-if="queren" type="primary" @click="sumque">确认收货</van-button>


    <van-form v-if="jihui" @submit="sumhui">
      <van-field v-model="wuliu" name="物流单号" label="物流单号" placeholder="请输入物流单号"
        :rules="[{ required: true, message: '请填写物流单号' }]" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">我要发货</van-button>
      </div>
    </van-form>

    <van-steps :active="active" direction="vertical" active-icon="success" active-color="#38f">
      <van-step>买家下单</van-step>
      <van-step>商家发货</van-step>
      <van-step>买家提货</van-step>
      <van-step>买家寄回</van-step>
      <van-step>卖家提货</van-step>
    </van-steps>
    <div style="height : 10vh"></div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Order',
  data() {
    return {
      wuliu: '',
      queren: false,
      jihui: false,
      goods: {
        title: "",
        id: 0,
        status: 0,
        description: "",
        price: 0,
        totalPrice: 0,
        days: 0,
        guarentee: 0,
        urls: [],
        fahuoaddress: "",
        jihuiaddress: ""
      },
      value: '',
      active: 0,
    };
  },
  components: {
  },
  created() {
    this.axios({
      method: "GET",
      url: "/aapi/order",
      params: {
        id: this.$store.state.deliverId
      }
    }).then(response => {
      this.goods = response.data
      this.active = this.goods.status
      if (this.active === 0) {
        this.jihui = true
      }
      if (this.active === 3) {
        this.queren = true
      }
      console.log(this.goods)
    })
  },
  methods: {
    sumhui() {
      let formData = new FormData()
      formData.append("id", this.$store.state.deliverId)
      formData.append("wuliu", this.wuliu)
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      this.axios.post("/aapi/fahuo", formData, config).then((res) => {
        this.jihui = false
        this.goods.status = 1
        this.active = 1
      })
    },
    sumque() {
      this.axios({
        method: "GET",
        url: "/aapi/queren2",
        params: {
          id: this.$store.state.deliverId
        }
      }).then(response => {
        this.goods.status = 4
        this.queren = false
        this.jihui = false
        this.active = 4
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
  }
}
</script>

<style>
.price-style {
  color: brown;
  font-size: 1.2rem;
}
</style>
